<template>
    <div class="menu-container">
        <div class="logo-container">
            <!-- <el-avatar :size="40" :src="circleUrl" /> -->
            <el-avatar
        src="http://sell.gotang.cn/img/logo.2ee21e35.jpg"
      />
            <h5 class="title">外卖管理系统</h5>
        </div>
        <el-menu 
            router
            :default-active="ActivePath"
            active-text-color="#409eff" 
            background-color="#304156" 
            text-color="#fff"
            unique-opened
            @open="handleOpen"
            @close="handleClose">
            
            <template v-for="item in menus">
                <!-- 有子菜单的项 -->
                <el-sub-menu 
                    v-if="item.children && item.children.length" 
                    :key="item.path" 
                    :index="item.path">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item 
                        v-for="child in item.children" 
                        :key="child.path" 
                        :index="child.path">
                        {{ child.title }}
                    </el-menu-item>
                </el-sub-menu>
                
                <!-- 没有子菜单的项 -->
                <el-menu-item 
                    v-else 
                    :key="item.path" 
                    :index="item.path">
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import {
    HomeFilled,
    Briefcase,
    Menu,
    List,
    Shop,
    TrendCharts
} from '@element-plus/icons-vue'

const route = useRoute()

// 菜单配置数据
const menus = ref([
    {
        path: '/home',
        title: '首页',
        icon: HomeFilled
    },
    {
        path: '/account',
        title: '账号管理',
        icon: Briefcase,
        children: [
            {
                path: '/accountList',
                title: '账号列表'
            },
            {
                path: '/accountAdd',
                title: '添加账号'
            },
            {
                path: '/accountCenter',
                title: '个人中心'
            },
            {
                path: '/accountEdit',
                title: '修改密码'
            }
        ]
    },
    {
        path: '/goods',
        title: '商品管理',
        icon: Menu,
        children: [
            {
                path: 'goodsList',
                title: '商品列表'
            },
            {
                path: 'goodsAdd',
                title: '商品添加'
            },
            {
                path: 'goodsType',
                title: '商品分类'
            }
        ]
    },
    {
        path: '/order',
        title: '订单管理',
        icon: List
    },
    {
        path: '/shopInfo',
        title: '店铺管理',
        icon: Shop
    },
    {
        path: '/statistics',
        title: '统计数据',
        icon: TrendCharts,
        children: [
            {
                path: '/statisticsGoods',
                title: '商品统计'
            },
            {
                path: '/statisticsOrder',
                title: '订单统计'
            }
        ]
    }
])

const ActivePath = computed(() => {
    return route.path
})

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
</script>

<style scoped>

.logo-container {
    display: flex;
    align-items: center;
    padding: 15px 20px;
}
.title {
    color: white;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 20px;
    font-size: 17px;
}

:deep(.el-menu) {
    border-right: none;
}

.el-icon {
    color: #909399;
}
</style>